<template>
  <div>
    <el-input v-model="shopName" placeholder="请输入店铺名" style="width:200px;margin-left: -450px;"></el-input>
    <el-button type="primary" style="margin-left: 5px;" @click="search">查询</el-button>
    <el-button type="primary" style="margin-left: 5px;" @click="open">新增</el-button>
<!--    <el-button type="primary" style="margin-left: 5px;" @click="open">新增</el-button>-->
<!--    <el-button type="primary" style="margin-left: 5px;" @click="dropBatch">批量删除</el-button>-->

    <el-table
        ref="multipleTable"
        :data="shopDate"
        tooltip-effect="dark"
        style="width: 100%"
    >
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="name"
          label="名字"
          width="120">
      </el-table-column>
      <el-table-column
          prop="legalPerson"
          label="负责人"
          width="80">
      </el-table-column>
      <el-table-column
          prop="creatTime"
          label="创建时间"
          width="100">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址"
          width="120">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="50">
      </el-table-column>
      <el-table-column
          prop="shopType.name"
          label="店铺类型"
          width="80">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEditopen(scope.row)">编辑</el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.row)">删除</el-button>
        <el-button
            size="mini"
            @click="open2(scope.row)">添加管理员</el-button>
          <el-button
              size="mini"
              @click="open3(scope.row)">当前管理员</el-button>

        </template>
      </el-table-column>
    </el-table>
    <!--    分页工具条-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>

    <!--    新增店铺的对话框-->
    <el-dialog title="店铺新增" :visible.sync="editDialogFormVisible"
               @close="clearForm">
      <el-form :model="form" :rules="rules" ref="formRef" :label-width="formLabelWidth">
        <el-form-item label="编号" prop="id">
          <el-input v-model="form.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺负责人" prop="legalPerson" :label-width="formLabelWidth">
          <el-input v-model="form.legalPerson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="creatTime" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form.creatTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="店铺地址" prop="address" :label-width="formLabelWidth">
          <el-input v-model="form.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺类型" prop="shopTypeId" :label-width="formLabelWidth">
          <el-select v-model="form.shopTypeId" placeholder="请选择">
            <el-option
                v-for="dept in depts"
                :key="dept.id"
                :label="dept.name"
                :value="dept.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
    <!--    修改店铺的对话框-->
    <el-dialog title="店铺新增" :visible.sync="editShop"
               @close="clearForm">
      <el-form :model="form3" :rules="rules" ref="formRefeditShop" :label-width="formLabelWidth">
        <el-form-item label="编号" prop="id">
          <el-input v-model="form3.id" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form3.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺负责人" prop="legalPerson" :label-width="formLabelWidth">
          <el-input v-model="form3.legalPerson" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="创建时间" prop="creatTime" :label-width="formLabelWidth">
          <el-date-picker
              v-model="form3.creatTime"
              type="date"
              placeholder="选择日期"
              value-format="yyyy/MM/dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="店铺地址" prop="address" :label-width="formLabelWidth">
          <el-input v-model="form3.address" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
          <el-input v-model="form3.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="店铺类型" prop="shopTypeId" :label-width="formLabelWidth">
          <el-select v-model="form3.shopTypeId" placeholder="请选择">
            <el-option
                v-for="dept in depts"
                :key="dept.id"
                :label="dept.name"
                :value="dept.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editShop = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>
    <!--    新增管理员的对话框-->
    <el-dialog title="添加管理员" :visible.sync="editManger"  @close="clearForm">
      <el-form :model="form2"  :rules="rules2" ref="managerRef" :label-width="formLabelWidth">
        <el-form-item label="电话" prop="phone" :label-width="formLabelWidth">
          <el-input v-model="form2.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="name" :label-width="formLabelWidth">
          <el-input v-model="form2.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="pass" :label-width="formLabelWidth">
          <el-input v-model="form2.pass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form2.remark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editManger = false">取 消</el-button>
        <el-button type="primary" @click="saveManager">确 定</el-button>
      </div>
    </el-dialog>

    <!--    查看当前管理员-->
    <el-dialog title="查看当前管理员" :visible.sync="selectManger" >
      <el-table
          ref="filterTable"
          :data="Mangerdata"
          style="width: 100%;text-align: center;margin-top: 23px"
      >
        <el-table-column
            prop="phone"
            label="电话"
            width="160"
        >
        </el-table-column>
        <el-table-column
            prop="name"
            label="名字"
            width="100"
        >
        </el-table-column>
          <el-table-column
              prop="remark"
              label="备注"
              width="100"
          >
        </el-table-column>
      </el-table>
    </el-dialog>


  </div>
</template>

<script>
export default {
  name: "shops",
  data() {
return{
  editDialogFormVisible:false,
  editManger:false,
  selectManger:false,
  editShop:false,
  curPage:1,
  pageSize:5,
  // 表格数据
  shopDate: [],
  total:0,
  shopName:'',
  depts:[],
  managers:'',
  shopId:'',
  formLabelWidth:'100px',
  Mangerdata:[],
  form:{
    id:'',
    name:'',
    legalPerson:'',
    creatTime:'',
    address:'',
    remark:'',
    shopTypeId:''

  },
  form2:{
    id:'',
    phone:'',
    name:'',
    pass:'',
    remark:'',
    shopId:''
  },
  form3:{
    id:'',
    name:'',
    legalPerson:'',
    creatTime:'',
    address:'',
    remark:'',
    shopTypeId:''
  },
  rules: {
    name: [
      {required: true, message: '请输入店铺名', trigger: 'blur'}
    ],
    legalPerson: [
      {required: true, message: '请输入店铺负责人', trigger: 'blur'}
    ],
    creatTime: [
      {required: true, message: '请选择创建时间', trigger: 'blur'}
    ],
    shopTypeId: [
      {required: true, message: '请选择部门', trigger: 'blur'},
    ]
  },
    rules2: {
      phone: [
        {required: true, message: '请输入店铺名', trigger: 'blur'}
      ],
      name: [
        {required: true, message: '请输入店铺名', trigger: 'blur'}
      ],
      pass:[
        {required: true, message: '请输入店铺名', trigger: 'blur'}
      ],
    },
   }
  },
  created(){
    this.showByPage()
    this.queryShopType()

  },

  methods: {
    // 多条件分页查询
    async showByPage() {
      let res = await this.$axios.get('/shop/queryAll', {
        params: {
          curPage:this.curPage,
          pageSize:this.pageSize,
          shopName: this.shopName
        }
      })
      this.shopDate = res.data.data
      this.total = res.data.total
    },// 查询按钮单击事件处理函数
    search() {
      this.showByPage()
    },
   async queryShopType(){
      let res=await this.$axios.get('/shop/queryShopType')
     this.depts=res.data.data
   },

    //删除
    handleDelete(row) {
      this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let resp = await this.$axios.get('/shop/dropBatch?id=' + row.id)
        if (resp.data.code === 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.showByPage()
        } else {
          this.$message({
            type: 'error',
            message: '删除失败!'
          });
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 为新增按钮绑定的单击事件处理函数
    open(){
      this.editDialogFormVisible=true
    },
    // 表单重置
    clearForm(){
      this.$refs.formRef.resetFields()
      this.$refs.managerRef.resetFields()
    },
    // 为保存按钮绑定单击事件处理函数
    save(){
      // 为编辑表单的确定按钮绑定表单提交校验
      this.$refs.formRef.validate(async valid => {
        // 校验通过，提交表单
        if (valid) {
          let res= await this.$axios.get('/shop/save',{
            params:this.form
          })
          if(res.data.code===200){
            this.showByPage()
            this.editDialogFormVisible=false
          }else{
            alert('操作失败')
          }
        }
        // 校验失败不提交表单
        else {
          return false;
        }
      });

    },
    open2(row){
      this.form2.shopId=row.id
     this.editManger=true

    },
  open3(row){
    this.shopId=row.id
    this.queryManger()
    this.selectManger=true

  },
    async saveManager(){
      //let resp = await this.$axios.get('/shopmanger/save?id=' + this.shopId)
      // 为编辑表单的确定按钮绑定表单提交校验
      this.$refs.managerRef.validate(async valid => {
        // 校验通过，提交表单
        if (valid) {
          let res= await this.$axios.get('/manager/save',{
            params:this.form2
          })
          if(res.data.code===200){
            this.showByPage()
            this.editManger=false
          }else{
            alert('操作失败')
          }
        }
        // 校验失败不提交表单
        else {
          return false;
        }
      });
    },async queryManger(){
      let res=await this.$axios.get('/manager/selectById',{
        params:{
          shopId:this.shopId
        }
      })
      this.Mangerdata=res.data.data
    },
    handleSizeChange(val) {

      this.pageSize=val
      this.showByPage()

    },
    handleCurrentChange(val) {

      this.curPage=val
      this.showByPage()
    },
    // 为表格的编辑按钮绑定单击事件处理函数
    handleEditopen(row) {
      this.editShop=true
      this.form3.id=row.id
      this.form3.name=row.name
      this.form3.legalPerson=row.legalPerson
      this.form3.creatTime=row.creatTime
      this.form3.address=row.address
      this.form3.remark=row.remark
      this.form3.shopTypeId=row.shopType.id
    }
    , // 为保存按钮绑定单击事件处理函数
   async handleEdit() {

          let res = await this.$axios.get('/shop/update', {
            params: this.form3
          })
          if (res.data.code === 200) {
            this.showByPage()
            this.editShop = false
          } else {
            alert('操作失败')
          }
        },

    }

//     async savemanger(row){
//       this.editManger=true
// let res=await this.$axios.get('/manager/selectAlls')
//       this.managers=res.data
//     }

}
</script>

<style scoped>

</style>